<template>
  <div class="store-page">
    <div class="top">
      <div class="topL">
        <div class="title">
          <div class="logo">
            <img :src="img" alt="" />
          </div>
          <div class="content">
            <p>{{ mallName }}</p>
            <!--            <p><span>河北</span><span>邯郸</span></p>-->
          </div>
          <div class="talk">
            <el-button><i class="el-icon-user-solid"></i>联系客服</el-button>
          </div>
        </div>
        <div class="Content">
          <div class="cl">
            <p>
              <span>掌柜</span>：<span>{{ user }}</span>
            </p>
            <p>
              <span>资质</span>：<span>{{ deposit }}元</span>
            </p>
            <p>
              <span>开店时长：</span>
              <span><span>店</span>8年老店</span>
            </p>
          </div>
          <div class="cr">
            <p>店铺动态评分</p>
            <p>
              <span>描述相符</span><span>{{ description }}</span>
              <img alt="" src="./images/分.png" />
            </p>
            <p>
              <span>服务态度</span><span>{{ sellerService }}</span>
              <img alt="" src="./images/分.png" />
            </p>

            <p>
              <span>物流服务</span><span>{{ logisticsService }}</span>
              <img alt="" src="./images/分.png" />
            </p>
          </div>
        </div>
      </div>
      <div class="topR">
        <img alt="" :src="homeImage" />
      </div>
    </div>
    <div class="middle">
      <p>本店全部宝贝</p>
    </div>
    <div class="product">
      <div
        v-for="(item, index) in items"
        :key="index"
        class="proItem"
        @click="handleToPro(item)"
      >
        <div class="img">
          <img alt="" :src="item.thumb" />
        </div>
        <div
          style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
          class="p"
        >
          {{ item.name }}
        </div>
        <div class="price">¥{{ (item.priceCurrent / 100).toFixed(2) }}/套</div>
        <div class="bottom">
          <i class="el-icon-s-goods"></i>{{ item.mallName }}
        </div>
      </div>
      <!-- 加载更多提示区域 -->
      <div v-if="loading" v-loading="loading" class="btt">Loading more...</div>
    </div>
    <div class="bt" style="height: 200px"></div>
  </div>
</template>

<script>
import {
  getShopDetail,
  getShopEvaluate,
  getShopGoods
} from '@/api/mallApi/store'
import { addMallView } from '@/api/mallApi/advert'

export default {
  name: 'StoreDetailPage',
  /* 注册组件 */
  components: {},
  props: {},
  data() {
    return {
      img: require('./images/logo.png'),
      items: [], // 存放加载的数据
      page: 1, // 当前页数
      loading: false, // 是否正在加载
      mallName: '',
      pageSize: 10,
      mallCode: '',
      total: 0,
      user: '',
      deposit: 0,
      description: 0,
      logisticsService: 0,
      sellerService: 0,
      homeImage: ''
    }
  },

  /* 计算属性 */
  computed: {},

  /* 监听器 */
  watch: {},

  mounted() {
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll)
    // 初始加载数据
    this.loadMore()
  },

  /* 初始化阶段 */
  created() {
    const { mallCode } = this.$route.query
    this.mallCode = mallCode
    this.getStoreDetail(mallCode)
    this.getShopE(mallCode)
    this.addView()
  },
  beforeDestroy() {
    // 在组件销毁前移除滚动事件监听
    window.removeEventListener('scroll', this.handleScroll)
  },

  /* 方法 */
  methods: {
    addView() {
      addMallView({ mallCode: this.mallCode }).then((res) => {
        if (res.code === '00000') {
          console.log(res)
        }
      })
    },
    // 滚动事件处理函数
    handleScroll() {
      // 获取滚动条滚动的距离
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      // 获取当前窗口的可视高度
      const { clientHeight } = document.documentElement
      // 获取当前页面的总高度
      const { scrollHeight } = document.documentElement
      // 判断是否滚动到底部
      if (scrollTop + clientHeight >= scrollHeight - 100) {
        // 如果当前正在加载数据，则直接返回
        if (this.loading) return
        // 如果当前数据已经加载完毕，则直接返回
        if (this.total == this.items.length) return
        this.page++
        this.loadMore()
      }
    },
    // 加载更多数据的函数
    loadMore() {
      // 调用获取商品列表的方法
      this.getGoodsList(this.mallCode)
    },
    // 获取店铺详情
    getStoreDetail(mallCode) {
      getShopDetail({
        mallCode
      }).then((res) => {
        // console.log(res)
        if (res.code === '00000') {
          this.img = res.data.image
          this.mallName = res.data.mallName
          this.homeImage = res.data.homeImage
        }
      })
    },

    // 获取商品
    getGoodsList(mallCode) {
      this.loading = true
      // 调用获取商品列表的方法
      getShopGoods({
        mallCode,
        isPage: 1,
        pageSize: this.pageSize,
        pageNum: this.page
      })
        .then((res) => {
          if (res.code === '00000') {
            this.loading = false
            this.items.push(...res.data.list)
            this.total = res.data.total
          }
        })
        .catch((err) => {
          // console.log(err)
          this.loading = false
        })
    },
    handleToPro(item) {
      this.$router.push({
        path: '/mall/product',
        query: {
          mallCode: item.mallCode,
          id: item.id
        }
      })
    },
    // 店铺评价信息
    getShopE(mallCode) {
      getShopEvaluate({
        mallcode: mallCode
      }).then((res) => {
        if (res.code === '00000') {
          this.user = res.data.user
          this.deposit = res.data.deposit
          this.description = res.data.description
          this.logisticsService = res.data.logisticsService
          this.sellerService = res.data.sellerService
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.store-page {
  width: 1240px;
  margin: 28px auto 0;

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .top {
    display: flex;
    justify-content: space-between;

    width: 100%;

    .topL {
      width: 435px;
      height: 314px;
      padding: 27px 20px 27px 27px;

      border-radius: 10px;
      background: #fff;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);

      .title {
        display: flex;

        img {
          width: 100px;
          height: 100px;
        }

        .content {
          margin-left: 10px;

          p {
            font-size: 16px;

            color: #1289ff;

            span {
              font-size: 14px;

              text-align: left;

              color: #585858;
            }

            span:nth-child(2) {
              margin-left: 15px;
            }
          }
        }

        .talk {
          margin-left: 79px;

          ::v-deep .el-button {
            line-height: 30px;

            width: 84px;
            height: 30px;

            border: 1px solid #e2e2e2;
            border-radius: 15px;
            background: #fff;

            i {
              font-size: 16px;

              width: 16px;
              height: 16px;
            }
          }
        }
      }

      .Content {
        display: flex;

        width: 388px;
        margin-top: 15px;

        .cl {
          width: 200px;

          border-right: 1px solid #e2e2e2;

          p {
            span {
              font-size: 16px;

              display: inline-block;

              color: #585858;
            }

            span:nth-child(1) {
              width: 80px;
              height: 24px;

              text-align: justify;
              text-align-last: justify;
            }

            span:nth-child(2) {
              margin-right: 8px;
            }
          }

          p:nth-child(2) {
            margin: 30px 0;

            span:nth-child(2) {
              font-size: 14px;
              line-height: 24px;

              width: 90px;
              height: 24px;
              padding-left: 24px;

              background-image: url("./images/资质.png");
            }
          }

          p:not(:nth-child(3)) {
            span:nth-child(1) {
              width: 64px;
            }
          }

          p:nth-child(3) {
            span:nth-child(2) {
              font-size: 14px;
              line-height: 24px;

              width: 81px;
              height: 24px;

              color: #ff6b00;
              border: 1px solid #ed742e;
              border-radius: 4px;
              background: #fff;

              span:nth-child(1) {
                width: 22px;
                height: 23px;
                margin: 0 4px 0 0;
                padding-left: 2px;

                text-align: center;
                vertical-align: top;

                color: #fff;
                border-radius: 3px 0 0 3px;
                background: #ff6b00;
              }
            }
          }
        }

        .cr {
          width: 188px;

          text-align: center;

          p:nth-child(1) {
            font-size: 16px;

            color: #000;
          }

          p:not(:nth-child(1)) {
            margin-top: 16px;

            span {
              font-size: 14px;

              display: inline-block;

              color: #adadad;
            }

            span:nth-child(2) {
              font-size: 14px;

              margin: 0 5px;

              color: #000;
            }
          }
        }
      }
    }

    .topR {
      width: 785px;
      height: 314px;
      padding: 0;

      img {
        width: 785px;
        height: 314px;

        border-radius: 10px;
      }
    }
  }

  .middle {
    margin-top: 24px;

    p {
      font-size: 22px;

      color: #3c3c3c;
    }
  }

  .product {
    display: flex;
    // 自动换行
    flex-wrap: wrap;

    margin-top: 19px;

    .proItem {
      // 鼠标手型
      cursor: pointer;
      width: 232px;
      height: 354px;
      margin-top: 18px;

      border-radius: 4px;
      background: #fff;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.36);

      .img {
        img {
          width: 232px;
          height: 219px;
        }
      }

      .p {
        font-size: 16px;

        margin-top: 10px;
        margin-left: 8px;

        color: #2b2b2b;
      }

      .price {
        font-size: 20px;

        margin-top: 17px;
        margin-left: 8px;

        color: #ff6b00;
      }

      .bottom {
        font-size: 16px;

        margin-top: 17px;
        margin-left: 8px;

        i {
          font-size: 17px;

          margin-right: 8px;

          color: #1289ff;
        }
      }
    }

    .proItem:not(:nth-child(5n)) {
      margin-right: 20px;
    }

    .btt {
      width: 100%;
      height: 200px;
      margin: 50px auto;

      text-align: center;
    }
  }
}
</style>
